<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: header}">
</head>
<body>
<!-- Page Content -->
<div class="container blog-content-container">

    <div class="row">

        <!-- Blog Entries Column -->
        <div class="col-md-8">

            <!-- Blog Post -->
            <div class="card mb-4">
                <div class="card-block">
                    <h2 class="card-title">
							<span>
			                  <a href="/u/waylau" title="waylau" th:href="'/u/' + ${blogModel.user.username}"  th:title="${blogModel.user.username}" > 
			                    <img src="/images/avatar-defualt.jpg" th:src="${blogModel.user.avatar} == null ? '/images/avatar-defualt.jpg' : ${blogModel.user.avatar}" class="blog-avatar-50">
			                  </a>
					        </span>
                        <a href="/u/waylau/blogs/1" class="card-link" title="waylau" 
                        	th:href="'/u/' + ${blogModel.user.username} + '/blogs/'+ ${blogModel.id}"  th:title="${blogModel.user.username}" th:text="${blogModel.title}">
                            OAuth 2.0 认证的原理与实践
                        </a>
                    </h2>
                    <div class="card-text">
                        <a href="/u/waylau" th:href="'/u/' + ${blogModel.user.username}" class="card-link" th:text="${blogModel.user.username}" >waylau</a> 发表于 [[${#dates.format(blogModel.createTime, 'yyyy-MM-dd HH:mm')}]] 
                        	<i class="fa fa-eye" aria-hidden="true">[[${blogModel.reading}]]</i>
		                    <i class="fa fa-heart-o" aria-hidden="true">[[${blogModel.likes}]]</i> 
		                    <i class="fa fa-comment-o" aria-hidden="true">[[${blogModel.comments}]]</i>
                         <a href="/u/waylau" th:if="${isBlogOwner}" th:href="'/u/' + ${blogModel.user.username}+ '/blogs/edit/'+ ${blogModel.id}" class="btn btn-primary float-right">编辑</a>
                         <a href="javascript:void(0)" th:if="${isBlogOwner}" th:attr="blogUrl='/u/' + ${blogModel.user.username} + '/blogs/'+ ${blogModel.id}"class="btn btn-primary float-right blog-delete-blog">删除</a>
                    </div>
                    <hr>
                    <article class="post-content" th:utext="${blogModel.htmlContent}">
                       
                	</article>
                    <hr>
                </div>
                <div class="card-block">


                    <h5>分类：<a href="/u/waylau/blogs?category=11">
                        Spring Data
                    </a></h5>

                    <h5>标签：
                        <a href="/u/waylau/blogs?keyword=分布式"> <span class="badge badge-default">Web Design</span></a>
                        <a href="/u/waylau/blogs?keyword=分布式"> <span class="badge badge-default">Jersey</span></a>
                        <a href="/u/waylau/blogs?keyword=分布式"> <span class="badge badge-default">JavaScript</span></a>
                        <a href="/u/waylau/blogs?keyword=分布式"> <span class="badge badge-default">CSS</span></a>
                        <a href="/u/waylau/blogs?keyword=分布式"> <span class="badge badge-default">Java</span></a>
                        <a href="/u/waylau/blogs?keyword=分布式"> <span class="badge badge-default">Freebies</span></a>

                    </h5>
                </div>

                <div class="card-block">


                    <h5>评论：</h5>
                    <div class="row">
                        <div class="col-lg-12">
                            <textarea class="blog-textarea" placeholder="看帖需留言~"></textarea>
                        </div>
                    </div>
                    <button class="btn btn-primary float-right">发表评论</button>

                </div>
                <div class="card-block">

                    <div class="row">
                        <h2 class="card-title col-lg-1 col-md-2">
							<span>
			                  <a href="/u/waylau" title="waylau">
			                    <img src="/images/avatar-defualt.jpg" class="blog-avatar-50"
                                     alt="waylau">
			                  </a>
					        </span>
                        </h2>
                        <div class="card-text col-lg-11 col-md-10">
                            <a href="/u/waylau" class="card-link">waylau</a> 1楼 2017-03-17 14:20
                            <p>不错哦，顶起！</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>

        <!-- 右侧栏目 -->
        <div class="col-md-4">
            <div>
                <!-- 文章目录 -->
                <div class="card ">
                    <h5 class="card-header"><i class="fa fa-bars" aria-hidden="true"></i> 文章目录</h5>
                    <div class="card-block">
                        <div class="row">
                            <div id="catalog" class="col-lg-12"></div>
                        </div>
                    </div>
                </div>


                <!-- 相关博客 -->
                <div class="card my-4">
                    <h5 class="card-header"><i class="fa fa-connectdevelop" aria-hidden="true"></i> 相关博客</h5>
                    <div class="list-group">
                        <ul class="list-group">
                            <a href="/u/waylau/blogs/1" class="list-group-item" title="waylau">
                                Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器
                            </a>
                            <a href="/u/waylau/blogs/1" class="list-group-item" title="waylau">
                                用大白话聊聊分布式系统
                            </a>
                            <a href="/u/waylau/blogs/1" class="list-group-item" title="waylau">
                                用大白话聊聊分布式系统>
                            </a>
                            <a href="/u/waylau/blogs/1" class="list-group-item" title="waylau">
                                使用 Eclipse Checkstyle Plugin
                            </a>

                            <a href="/u/waylau/blogs/1" class="list-group-item" title="waylau">
                                使用 Eclipse Checkstyle Plugin
                            </a>
                        </ul>
                    </div>

                </div>

            </div>
        </div>

    </div>
    <!-- /.row -->

</div>
<!-- /.container -->


<div th:replace="~{fragments/footer :: footer}">...</div>
<script src="../../js/userspace/blog.js" th:src="@{/js/userspace/blog.js}"></script>
</body>
</html>